<template>
	<view>
		<!-- <uni-nav-bar  title="编辑" /> -->
		<view class="textedit" v-if="showType==0">
			<view class="flex">
				<view class="text_label">产品名字</view>
				<input class="inputEdit" v-model="formData.name" placeholder="请输入" placeholder-class="placeholder" />
			</view>
			<view class="flex">
				<view class="text_label">产品类别</view>
				<input class="inputEdit"  v-model="formData.category" placeholder="请输入" placeholder-class="placeholder" />
			</view>
			<view class="flex">
				<view class="text_label">产品优势</view>
				<input class="inputEdit"  v-model="formData.advantage" placeholder="请输入" placeholder-class="placeholder" />
			</view>
			<view class="button" @click="submitFn">生成</view>
		</view>
		<view class="textbox" v-if="showType==1">
			<view class="text">
				{{textarea}}
			</view>
		</view>
	</view>
</template>

<script>
	export default{
		data(){
			return {
				formData:{
					name:'',
					category:'',
					advantage:''
				},
				showType:0,
				textarea:''
			}
		},
		onLoad(){},
		methods:{
			back(){
				uni.navigateBack({
					delta:1
				})
			},
			submitFn(){
				if(!this.formData.name || ! this.formData.advantage || !this.formData.category){
					uni.showToast({
						title:"请填写完整信息",
						icon:"none"
					})
					return false
				}
				uni.showLoading()
				
				let askStr=""
				askStr=this.formData.name+this.formData.category+this.formData.advantage
				console.log(`"${askStr}"`);
				let param = {}
				param.url = 'v3/openai/front/chartGpt/xf/question'
				param.method = 'POST'
				param.header={
								  'Content-Type': 'application/json'
								}
				param.data = {
					askStr:`"${askStr}"`
				}
				console.log(param);
				 this.$request(param).then(res=>{
					 console.log(res);
					  if(res.msg){
						  this.textarea=res.msg
						  this.showType=1
					  } else if(res.errMsg=="request:fail timeout"){
						 uni.showToast({
						 	title:"请求失败！",
							icon:'none'
						 })
					 }
					
					 uni.hideLoading()
				 })
			}
		}
	}
</script>

<style lang="scss" scoped>
	page{
		background-color: #f7f7f7;
	}
	.flex{display:flex;align-items: center;margin-bottom: 30rpx;}
	.inputEdit{
		border-radius: 15rpx;
		border: 2rpx solid #eee;
		margin-left:30rpx;
		padding:10rpx 20rpx;
		height: 2rem;
	}
	.textedit{
		margin: 30rpx;
		padding:  40rpx;
		border: 2rpx solid #eee;
		border-radius: 15rpx;
		background-color: #fff;
	}
	.text_label{
		font-size: 30rpx;
	}
	.placeholder{
		font-size: 26rpx;
	}
	.textbox{
		height: 500px;
		margin: 30rpx;
		padding: 30rpx;
		border: 2rpx solid #eee;
		border-radius: 15rpx;
		
	}
	
	.text{
		display: inline-block;
		overflow: hidden;
		// background-color: red;
		height: 1.5rem;
		animation: typing 5s forwards;
	}
	
	@keyframes typing {
	from { width: 100%;height: 1.5rem; }
	to { width: 100%; height: 100%;}
	}
	
	.button{
		color: #fff;
		text-align: center;
		padding: 20rpx;
		border-radius: 15rpx;
		margin: 150rpx  0  100rpx 0 ;
		background-color: #fc701e;
	}
</style>